<template>
    <div>
        <!-- 1. 直接使用 -->
        <div>count: {{$store.state.count}}</div>
        <div>message: {{$store.state.message}}</div>

        <!-- 2.借助mapState函数 -->
        <div>count-mapState: {{count}}</div>
        <div>message-mapState: {{message}}</div>

        <!-- 3.和当前组件重名时，使用mapState对象方式 -->
        <div>count-msg: {{msgAlias}}</div>
    </div> 
</template>

<script>
import {mapState} from 'vuex'
export default {
    name: 'State',
    data() {
        return {
            msg: "msg",
        }
    },
    computed:{
    // 相当于
    // ...{
    //   count:state=>state.count,
    //   message:state=>state.message,
    // }
    ...mapState(['count', 'message']),
    ...mapState({msgAlias: 'msg'})
    },
}
</script>
